<template>
  <div class="person">
    <h2>汽车信息:一辆{{ car.brand }} 车, 价值{{ car.price }}万</h2>
    <button @click="changePrice">修改汽车价格</button>
    <br>
    <h2>游戏列表</h2>
    <ul>
      <li v-for="item in games" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏名字</button>
  </div>
</template>


<script lang="ts" setup>
import {ref, reactive} from "vue";
//数据 ref修饰对象时在使用的时候需要加.value
let car = ref({brand: '奔驰', price: 100})

//ref能定义基本数据,对象  ref创建的变量必须使用.value
//reactive 只能定义对象.   reactive重新分配一个新对象,会市区响应式
let games = ref([
  {id: 'aaa01', name: '王者荣耀'},
  {id: 'aaa02', name: 'qq飞车'},
  {id: 'aaa03', name: '穿越火线'}
])

let obj = reactive({ x: 999 });
console.log(car)
console.log(obj)

function changePrice() {
  car.value.price += 10
  console.log(car.value.price)
  console.log(car)
  console.log(Proxy)
}

function changeFirstGame() {
  games.value[0].name = '流行蝴蝶剑'
}
</script>

<style scoped>
li {
  font-size: 20px;
}
</style>
